<template>
  <div class="box">
    <span class="t1 tl1"></span>
    <span class="t2 tl2"></span>
    <span class="t1 tr1"></span>
    <span class="t2 tr2"></span>
    <span class="t1 bl1"></span>
    <span class="t2 bl2"></span>
    <span class="t1 br1"></span>
    <span class="t2 br2"></span>
    <div class="border">
      <slot></slot>
    </div>
  </div>
</template>

<script lang="ts" setup></script>

<style lang="scss" scoped>
$color: #29f1fa;
.box {
  position: relative;
  // padding: 1px;
  .border {
    width: 100%;
    height: 100%;
    border: 1px solid rgba($color, 50%);
  }
  .t1 {
    position: absolute;
    width: 20px;
    height: 1px;
    background-color: $color;
  }
  .t2 {
    position: absolute;
    width: 1px;
    height: 20px;
    background-color: $color;
  }
  .tl1,
  .tl2 {
    top: 0;
    left: 0;
  }
  .tr1,
  .tr2 {
    top: 0;
    right: 0;
  }
  .bl1,
  .bl2 {
    bottom: 0;
    left: 0;
  }
  .br1,
  .br2 {
    bottom: 0;
    right: 0;
  }
}
</style>
